import { px2rem } from "@/assets/global-style";
import styled from "styled-components";

export const Wrapper=styled.div`
    display: flex;
    align-items: center;
    margin: ${px2rem(12)} 0;
    .course_img_wrapper{
        height: ${px2rem(50)};
        width: ${px2rem(80)};
        margin:0  ${px2rem(16)};
        .course_img{
            height: ${px2rem(50)};
            width: ${px2rem(80)};
            object-fit: cover;
            border-radius: ${px2rem(12)};
        }
    }
    .course_desc_wrapper{
        
        height: ${px2rem(50)};
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        .course_title{
            padding-right:${px2rem(12)} ;
            width: ${px2rem(180)};
            font-size: ${px2rem(16)};
            height: ${px2rem(28)};
            line-height: ${px2rem(28)};
            font-weight: bold;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .course_desc{
            font-size: ${px2rem(14)};
            
        }
    }
`